<template>
    <div >
        <div class="common-layout">
            <el-container style="flex:1">
                <el-header>
                    <Header></Header>
                </el-header>
                <el-container class="back">
                    <el-aside width="300px">
                        <StorageAside></StorageAside>
                    </el-aside>
                    <el-main style="background-color:transparent;">
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'

import StorageAside from '@/components/StorageAside.vue'
export default {
    name: '',
    components: {
        Header,
        StorageAside
    },
    data() {
        return {

        }
    },
    methods: {

    },
    created() {
    },
    mounted() {
    },
}
</script>
<style lang="css" scoped>
/* 路由的过渡效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* 整体盒子 */
.common-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* background-color: blue; */
}

/* 头部 */
.el-header {
    --el-header-padding: 0;
    height: 210px;
    /* background-color: rgb(203, 128, 240); */
}

/* 内容部分 */
.el-main {
    --el-main-padding: 0px;
    height: 480px;
    /* width: 200px; */
    margin-right: 50px;
}

/* 背景部分 */
.back {
    height: 100%;
    background-color: aliceblue;
    /* height: 800px; */
    background-image: url(@/assets/微信图片_20230427000450.png);
    /* padding-top: -70%; */

    background-size: 100% 100%;

}
</style>
